<template>
  <div class="condition-main">
    <div class="condition-form" v-for="(item, index) in form.list" :key="item.key">
      <div class="form-card">
        <div class="header">
          <span class="title">{{ `条件组${index + 1}` }}</span>
          <div class="flex-btns">
            <div class="ic-btn" v-if="form.list.length < max" @click="addForm">
              <i class="el-icon-plus"></i>
            </div>
            <div class="ic-btn" v-if="form.list.length > 1" @click.prevent="removeFormItem(item)">
              <i class="el-icon-minus"></i>
            </div>
          </div>
        </div>
        <div class="card-wrap">
          <el-form :model="form" status-icon ref="conditionForm" label-width="140px" label-position="right">
            <div class="form-item">
              <el-form-item label="企微标签：" prop="type">
                <div class="form-item-rows">
                  <el-select size="small" style="width: 128px;">
                    <el-option v-for="item in keyTags" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                  <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt' width="240px" />
                </div>
              </el-form-item>
              <el-form-item label="智能标签：" prop="type">
                <div class="form-item-rows">
                  <el-select size="small" style="width: 128px;">
                    <el-option v-for="item in keyTags" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                  <MultipleSelect size="small" placeholder='智能标签' :receiverNameOpt='lableOpt' width="240px" />
                </div>
              </el-form-item>
              <el-form-item label="加好友时间：" prop="type">
                <el-date-picker size="small" style="width: 375px;" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="备注：" prop="type">
                <el-select v-model="item.remark" size="small" placeholder="请选择" style="width: 375px;">
                  <el-option v-for="item in remarks" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="pass" v-if="item.remark === 2">
                <div class="form-item-rows">
                  <el-select size="small" style="width: 128px;">
                    <el-option v-for="item in keyWords" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                  <el-input placeholder="请输入内容" size="small" style="width: 240px;">
                    <template slot="append">
                      <i class="el-icon-plus"></i>
                    </template>
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="性别：" prop="type">
                <el-select size="small" placeholder="请选择" style="width: 375px;">
                  <el-option v-for="item in gender" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <div class="exclude-options">
                <el-checkbox v-model="item.isExclude" /><span style="margin-left: 8px;">排除符合以下条件的客户群</span>
              </div>
              <div v-if="item.isExclude">
                <el-form-item label="企微标签：" prop="type">
                  <div class="form-item-rows">
                    <el-select size="small" style="width: 128px;">
                      <el-option v-for="item in keyTags" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <el-select size="small" placeholder="请选择" style="width: 240px;">
                      <el-option v-for="item in keyTags" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="智能标签：" prop="type">
                  <div class="form-item-rows">
                    <el-select size="small" style="width: 128px;">
                      <el-option v-for="item in keyTags" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <el-select size="small" placeholder="请选择" style="width: 240px;">
                      <el-option v-for="item in keyTags" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="加好友时间：" prop="type">
                  <el-date-picker size="small" style="width: 375px;" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="备注：" prop="type">
                  <el-select size="small" placeholder="请选择" style="width: 375px;">
                    <el-option v-for="item in remarks" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="pass">
                  <div class="form-item-rows">
                    <el-select size="small" style="width: 128px;">
                      <el-option v-for="item in keyWords" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <el-input placeholder="请输入内容" size="small" style="width: 240px;">
                      <template slot="append">
                        <i class="el-icon-plus"></i>
                      </template>
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item label="性别：" prop="type">
                  <el-select size="small" placeholder="请选择" style="width: 375px;">
                    <el-option v-for="item in gender" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <el-button class="operator-btn" size="small" type="primary" v-if="index < form.list.length - 1">
        {{ operator ? '且' : '或' }}
        <i class="el-icon-sort el-icon--right"></i></el-button>
    </div>
  </div>
</template>
<script>
import MultipleSelect from '@/components/MultipleSelect'
export default {
  data() {
    return {
      max: 3,
      form: {
        operator: false,
        list: [{
          companyTagType: '',
          companyTags: {},
          intellectTagType: '',
          intellectTags: {},
          dateTime: '',
          remark: 1,
          gender: '',
          isExclude: false,
          exclude: {
            ompanyTagType: '',
            companyTags: {},
            intellectTagType: '',
            intellectTags: {},
            dateTime: '',
            remark: 1,
            gender: '',
          }
        }],
      },
      keyWords: [
        { id: 1, name: '含任意关键词' },
        { id: 2, name: '含所有关键词' },
      ],
      keyTags: [
        { id: 1, name: '含任意标签' },
        { id: 2, name: '含所有标签' },
        { id: 3, name: '未打任何标签' },
      ],
      remarks: [
        { id: 1, name: '无备注' },
        { id: 2, name: '有备注' },
      ],
      gender: [
        { id: 1, name: '男' },
        { id: 2, name: '女' },
        { id: 3, name: '未知' },
      ],
      lableOpt:[
        {value:1,label:'客户等级',children:['一般','重要','核心']},
        {value:2,label:'客户等级2',children:['一般2','重要2','核心2']}
      ]
    }
  },
  components: {
    MultipleSelect
  },
  methods: {
    addForm() {
      this.form.list.push({
        companyTagType: '',
        companyTags: {},
        intellectTagType: '',
        intellectTags: {},
        dateTime: '',
        remark: 1,
        gender: '',
        isExclude: false,
        exclude: {
          ompanyTagType: '',
          companyTags: {},
          intellectTagType: '',
          intellectTags: {},
          dateTime: '',
          remark: 1,
          gender: '',
          isExclude: false,
        },
        key: Date.now()
      })
    },
    removeFormItem(item) {
      var index = this.form.list.indexOf(item)
      if (index !== -1) {
        this.form.list.splice(index, 1)
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.form-card {
  .header {
    height: 48px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 4px 4px 0 0;

    .flex-btns {
      display: flex;
      gap: 8px;

      .ic-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #3070ff;
        font-weight: bold;
        height: 22px;
        width: 22px;
        color: #3070ff;
        cursor: pointer;
      }
    }
  }

  .card-wrap {
    padding: 16px;
    background: #f9f9f9;
  }

  .form-item-rows {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .exclude-options {
    display: flex;
    align-items: center;
    border-top: 1px solid #e9e9e9;
    font-size: 14px;
    line-height: 22px;
    padding: 16px 0;
    font-weight: 600;
  }

}

.operator-btn {
  margin: 16px 0;
}


::v-deep .el-form-item .el-form-item {
  margin-bottom: 16px;
}

::v-deep .el-input-group__append {
  padding: 0 10px;
}
</style>